<template>
  <div class="app-container">
    <!-- 移动端骨架屏 -->
    <mobile-skeleton 
      v-if="isMobile && loading" 
      :showHeader="true"
      :showForm="true"
      :formFields="4"
      :showButton="true"
      :showPagination="false"
    />
    
    <el-row :gutter="24" v-else-if="!isMobile">
      <el-col :span="24" style="margin-bottom: 20px">
        <el-alert title="点击`开始考试`后将自动进入考试，请诚信考试！" type="error" style="margin-bottom: 10px" />
        <el-card class="pre-exam">
          <div><strong>考试名称：</strong>{{ detailData.name }}</div>
          <div><strong>考试时长：</strong>{{ detailData.time_limit }}分钟</div>
          <div><strong>试卷总分：</strong>{{ detailData.total_score }}分</div>
          <div><strong>及格分数：</strong>{{ detailData.qualify_score }}分</div>
          <div>
            <strong>考试类型：</strong>{{ detailData.type | ExamTypeFormat }}
          </div>
          <div><strong>关联课程：</strong> {{ detailData.course }}</div>
          <div>
            <strong>考试状态：</strong> {{ detailData.state_name }}
          </div>
          <div v-show="detailData.paper &&
            detailData.state == 2 &&
            detailData.paper_list.length == 1
            ">
            <strong>已交卷</strong>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-button :loading="loading" type="primary" icon="el-icon-caret-right" @click="handleCreate" :style="{
            backgroundColor: theme,
            borderColor: theme,
            fontWeight: 'bold'
          }" v-show="detailData.state == 1">
          开始考试
        </el-button>
        <el-button @click="handleBack"> 返回 </el-button>
      </el-col>
    </el-row>
    
    <!-- 移动端布局 -->
    <div class="mobile-exam-preview" v-else>
      <el-alert title="点击`开始考试`按钮后将进入考试，请诚信考试！" type="error" style="margin-bottom: 15px" />
      
      <el-card shadow="hover" class="preview-card">
        <div class="preview-header">
          <h3 :style="{ color: theme }">{{ detailData.name }}</h3>
        </div>
        
        <div class="preview-info">
          <div class="info-row">
            <div class="info-item">
              <span class="label">考试时长：</span>
              <span class="value">{{ detailData.time_limit }}分钟</span>
            </div>
            <div class="info-item">
              <span class="label">试卷总分：</span>
              <span class="value">{{ detailData.total_score }}分</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">及格分数：</span>
              <span class="value">{{ detailData.qualify_score }}分</span>
            </div>
            <div class="info-item">
              <span class="label">考试类型：</span>
              <span class="value">{{ detailData.type | ExamTypeFormat }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">关联课程：</span>
              <span class="value">{{ detailData.course }}</span>
            </div>
            <div class="info-item">
              <span class="label">考试状态：</span>
              <span class="value status-tag">{{ detailData.state_name }}</span>
            </div>
          </div>
          
          <div class="info-row" v-show="detailData.paper && detailData.state == 2 && detailData.paper_list.length == 1">
            <div class="info-item submitted-tag">
              <el-tag type="warning">已交卷</el-tag>
            </div>
          </div>
        </div>
      </el-card>
      
      <div class="mobile-action-container">
        <el-button 
          :loading="loading" 
          type="primary" 
          icon="el-icon-caret-right" 
          @click="handleCreate" 
          :style="{
            backgroundColor: theme,
            borderColor: theme,
          }" 
          v-show="detailData.state == 1"
        >
          开始考试
        </el-button>
        <el-button @click="handleBack" v-show="detailData.state !== 1" style="width: 100%;">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { examDetail } from "@/api/vadmin/exam/exam";
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import MobileSkeleton from "@/components/MobileSkeleton";
import "@/assets/styles/mobile/exam.scss";

export default {
  components: { MobileSkeleton },
  data() {
    return {
      detailData: {},
      loading: true,
      isMobile: false,
      mediaQueryList: null
    };
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    }
  },
  created() {
    const id = this.$route.params.id;
    // console.log("考试id", id);
    this.fetchData(id);
  },

  mounted() {
    // 使用媒体查询API直接监听视口变化
    this.mediaQueryList = window.matchMedia('(max-width: 767px)');
    
    // 初始化isMobile状态
    this.isMobile = this.mediaQueryList.matches;
    
    // 为媒体查询添加监听器
    const handleMediaChange = (e) => {
      this.isMobile = e.matches;
      
      // 强制组件重新渲染
      this.$forceUpdate();
    };
    
    // 使用适当的API添加监听器
    if (this.mediaQueryList.addEventListener) {
      this.mediaQueryList.addEventListener('change', handleMediaChange);
    } else {
      // 旧版浏览器支持
      this.mediaQueryList.addListener(handleMediaChange);
    }
    
    // 存储监听器以便后续移除
    this.mediaChangeHandler = handleMediaChange;
  },
  
  beforeDestroy() {
    // 移除媒体查询监听器
    if (this.mediaQueryList) {
      if (this.mediaQueryList.removeEventListener) {
        this.mediaQueryList.removeEventListener('change', this.mediaChangeHandler);
      } else {
        // 旧版浏览器支持
        this.mediaQueryList.removeListener(this.mediaChangeHandler);
      }
    }
  },

  methods: {
    fetchData(id) {
      examDetail(id).then(response => {
        this.detailData = response;
        this.detailData.course = response.name;
        // console.log(2222, response);
        this.loading = false;
      });
    },

    handleCreate() {
      const that = this;
      this.loading = true;
      // console.log("试卷id", this.detailData.paper);
      if (this.detailData.paper.id) {
        that.$router.push({
          name: "Paper",
          params: {
            id: this.detailData.paper.id
          }
        });
      }
    },

    handleBack() {
      this.$router.back()//返回浏览器上一页，并保留上一页数据
    }
  }
};
</script>

<style scoped>
.pre-exam div {
  line-height: 42px;
  color: #555555;
}

/* 移动端样式 */
.mobile-exam-preview {
  padding: 0 5px;
}

.preview-card {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.preview-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
  text-align: center;
}

.preview-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.preview-info {
  margin-bottom: 10px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.info-item {
  width: 50%;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.label {
  color: #606266;
  margin-right: 5px;
  font-weight: 500;
}

.value {
  color: #303133;
}

.status-tag {
  padding: 2px 6px;
  background-color: #f0f9eb;
  color: #67c23a;
  border-radius: 4px;
  font-size: 12px;
}

.submitted-tag {
  width: 100%;
  justify-content: center;
  margin-top: 5px;
}
</style>